<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>加解密</title>
	<meta charset="utf-8"></meta>
	<script type="text/javascript" src="vue.min.js"></script>
	<script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
<%@include file="/jsp/nav/nav.jsp" %>

<div id="app">
	<div class="content">
		<div class="ciphertext">
		<textarea class="mingwen" v-model.trim="originData" placeholder="请输入原始数据"></textarea>
		</div>
		<div class="deciphering-button">
			<button class="anniu" v-on:click="encrypt()">加密</button>
			<button class="anniu" v-on:click="decrypt()">解密</button>
		</div>
		<div class="deciphering" >
		<textarea class="mingwen" placeholder="加密或解密后的数据" v-model.trim="resultData"></textarea>
		</div>	
	</div>
</div>

<script type="text/javascript"  src="EN_DEcrypt.js"></script>

<style>
html,body{
	width:100%;
	height:100%;
	}
body{
	background-image:url('xiaoge.png');
	background-repeat:no-repeat;
	background-position: right bottom;
}
#app{
	width:100%;
	height:100%;
	margin-top:50px;
	}
.content{
	width:100%;
	height:300px;

}

.deciphering-button{
	width:100%;
	height:30px;
	margin-top:50px;
	margin-bottom:50px;
}

.mingwen{
	position:relative;
	width:100%;
	height:100px;
	border-radius:15px;
	box-shadow: 10px 10px 5px #888888;
	padding-left:30px;
	box-sizing:border-box;
	padding-top:20px;
	outline: none;
	font-size: 16px;
}
.anniu{
	display:inline-block;
	width:130px;
	font-weight:bold;
	background-color: #4CAF50;
    border: none;
    color: white;
    padding: 5px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
}
</style>
</body>
</html>